<template>
  <view>
    <!-- #ifndef MP -->
    <!-- 固定在顶部的导航栏 -->
    <uni-nav-bar
      fixed="true"
      @click-left="back"
      @click-right="showMenu"
      left-text="返回"
      right-icon="tianjiahaoyou"
      title="通讯录"
      left-icon="jiantou2"
      background-color="#fff" 
    ></uni-nav-bar>
    <!-- 使用非原生导航栏后需要在页面顶部占位 -->
    <!-- <view style="height:90px;"></view> -->
    <view :style="style"></view>
    <!-- <uni-status-bar class="cs0"></uni-status-bar> -->
    <!-- #endif -->
    <view class="input-view">
      <uni-icon @click="clickemjo" type="sousuo" size="11" color="#666666"></uni-icon>
      <input
        confirm-type="search"
        @confirm="confirm"
        class="input"
        type="text"
        placeholder="输入搜索关键词"
      >
    </view>
    <view class="addtelphone">
      <view class="icons">
        <image src="../../../static/images/friendpagemq/sjtxl.png" mode="aspectFit"></image>
        <text>添加手机联系人</text>
      </view>
      <view class="addfriend">好友请求</view>
    </view>

    <view class="grace-list">
    </view>
        <friendpage 
        imgurl="../../../static/images/friendpagemq/mp.png"
            url="../city/city" 
            title="阿兰" 
            desc="我是阿兰" 
            descbr="真是姓名:张小华" 
            openType="navigate">
        </friendpage>
              <friendpage 
        imgurl="../../../static/images/friendpagemq/mp.png"
             url="../city/city" 
            title="阿兰" 
            desc="我是阿兰" 
            descbr="真是姓名:张小华" 
            openType="navigate">
        </friendpage>
                  <friendpage 
        imgurl="../../../static/images/friendpagemq/mp.png"
             url="../city/city" 
            title="阿兰" 
            desc="我是阿兰" 
            descbr="真是姓名:张小华" 
            openType="navigate">
        </friendpage>
                  <friendpage 
        imgurl="../../../static/images/friendpagemq/mp.png"
             url="../city/city"  
            title="阿兰" 
            desc="我是阿兰" 
            descbr="真是姓名:张小华" 
            openType="navigate">
        </friendpage>
        <friendpage 
        imgurl="../../../static/images/friendpagemq/mp.png"
            url="../city/city" 
            title="阿兰" 
            desc="我是阿兰" 
            descbr="真是姓名:张小华" 
            openType="navigate">
        </friendpage>
         <friendpage 
        imgurl="../../../static/images/friendpagemq/mp.png"
           url="../city/city" 
            title="阿兰" 
            desc="我是阿兰" 
            descbr="真是姓名:张小华" 
            openType="navigate">
        </friendpage>
        <friendpage 
        imgurl="../../../static/images/friendpagemq/mp.png"
          url="../city/city" 
            title="阿兰" 
            desc="我是阿兰" 
            descbr="真是姓名:张小华" 
            openType="navigate">
        </friendpage>
  </view>
</template>

<script>
import uniNavBar from "@/components/uninavbar";
import uniIcon from "@/components/uni-icon";
import uniStatusBar from '@/components/uni-status-bar'
import friendpage from '@/components/friendpage'
export default {
  components: {
    uniNavBar,
    uniIcon,
    uniStatusBar,
    friendpage
  },
  onLoad(){
 
  },
  computed: {
    style() {

      var systemInfo = uni.getSystemInfoSync();
       var systo =  uni.getSystemInfo()
      // console.log( JSON.stringify(systo));
   
          console.log(systemInfo.statusBarHeight);
          var statusBarHeight = systemInfo.statusBarHeight
      // if(systemInfo.platform =="android"){
        return `height:${statusBarHeight+60}px`;
      // }else{
      //  return `height:${statusBarHeight}+44px`;
      // }
  
      
      // return `height:${systemInfo.statusBarHeight}px`;
  }
  },
  data() {
    return {
      city: "北京"
    };
  },
  methods: {
    clickemjo(){
      console.log(132);
      
      uni.navigateTo({
          url: "../city/city"
      })
    },
    back() {
      uni.navigateBack({
        delta: 1
      });
    },
    showMenu() {
      uni.navigateTo({
        url: "../friends/newFriend"
      });
    },
    clickLeft() {
      uni.showToast({
        title: "左侧按钮"
      });
    },
    search() {
      uni.showToast({
        title: "搜索"
      });
    },
    showCity() {
      uni.showToast({
        title: "选择城市"
      });
    },
    scan() {
      uni.showToast({
        title: "扫码"
      });
    },
    confirm() {
      uni.showToast({
        title: "搜索"
      });
    }
  },
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
    setTimeout(function() {
      uni.stopPullDownRefresh();
      console.log("stopPullDownRefresh");
    }, 1000);
  }
};
</script>

<style lang="scss">

.grace-list{
  // height: 1000px;
  padding: 0;
}
.grace-list .items .icons {
  width: 58upx;
  height: 58upx;
  line-height: 58upx;
  text-align: center;
  margin: 18px 0 15px 15px;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 0;
}
.grace-list .items .icons image {
  width: 58upx;
  height: 58upx;
}

.grace-list .items .title {
  width: 100%;
  margin-left: 18px;
  padding: 18px 30px 18px 0;
  font-size: 16px;
  height: 58upx;
  line-height: 58upx;
  overflow: hidden;
  border-bottom: 1px solid #E9E9E9;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.addtelphone {
  margin: 0 auto;
  width: 80%;
  padding: 0 4%;
}
.tel {
  width: 100%;
}
.addfriend {
   font-weight: 500;
  padding-left: 5upx;
  margin-top: 20upx;
}
.border {
  border-bottom: 1px solid #eeeeee;
}
.icons {
  margin: 20px 0;
  display: flex;
  // justify-content: space-around;
  align-items: center;

}
.icons text {
  font-size: 28upx;
  font-weight: 500;
  margin-left: 48upx;
}
.icons image {
  width: 31upx;
  height: 52upx;
}
.title {
  font-size: 15px;
  line-height: 20px;
  color: #333333;
  padding: 15px;
}

.city {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: 8px;
}

.input-view {
  width: 88%;
  display: flex;
  background-color: #e7e7e7;
  height: 25px;
  border-radius: 0px;
  padding: 0 4%;
  flex-wrap: nowrap;
  margin: 7px auto;
  line-height: 25px;
}

.input-view .uni-icon {
  line-height: 30px !important;
}

.input-view .input {
  height: 50upx;
  line-height: 50upx;
  width: 80%;
  padding: 0 3%;
}
</style>
